<template>
  <Container padding="0 4.2708vw">
    <NavPanel :activeId="newsNavPanelActiveId" :data="newsNavPanel" />
    <Container
      class="inner-container"
      padding-bottom="0"
      padding-top="0"
      v-if="newsList"
    >
      <div class="news-list">
        <div
          class="news-item"
          @click="toDetail(item.id)"
          v-for="item in newsList.data"
          :key="item.id"
        >
          <div class="time">
            <span class="day"
              >{{ getTimeValue(item.create_time, "day") }}/</span
            >
            <div>
              <span class="month">{{
                getTimeValue(item.create_time, "month") + $t("unit.month")
              }}</span>
              <span class="year">{{
                getTimeValue(item.create_time, "year")
              }}</span>
            </div>
          </div>
          <div class="vertical-divider"></div>
          <div class="content">
            <div class="title">{{ item.title }}</div>
            <div class="descri" v-html="item.describe"></div>
          </div>
        </div>
      </div>
      <ShowMore
        v-model:currenPage="listParams.page"
        :totalCount="listParams.totalCount"
        @change="showMoreChange"
        showQuickJumper
        showTotal
        :showSizeChanger="false"
      ></ShowMore>
    </Container>
  </Container>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from "vue";
import { useRoute } from "vue-router";
import { postNewsCategory, postNewsIndex } from "../../../api/news";

const newsNavPanel = ref();
const newsNavPanelActiveId = ref();
const newsNavPanelActiveIndex = ref(0);
const getNewsCategoryData = async () => {
  let res = await postNewsCategory();
  newsNavPanel.value = res.data.data.map((item) => {
    return {
      value: item.id,
      label: item.title,
      ...item,
    };
  });
  newsNavPanelActiveId.value = newsNavPanel.value[0].value;
  getNewsList();
};

const listParams = ref({
  page: 1,
  totalCount: 0,
});

const newsList = ref();
const getNewsList = async () => {
  let cat_id = newsNavPanel.value[newsNavPanelActiveIndex.value].id;
  let res = await postNewsIndex(cat_id);
  newsList.value = res.data;
};

const getTimeValue = computed(() => {
  return (value, key) => {
    switch (key) {
      case "day":
        return new Date(value).getDate();
      case "month":
        return new Date(value).getMonth() + 1;
      case "year":
        return new Date(value).getFullYear();
      default:
        return "";
    }
  };
});

const showMoreChange = ({ page, pageSize }) => {};

const route = useRoute();
// 跳转文章详情页
const toDetail = (id: number) => {
  let fullQuery = route.query;
  goto("/news/detail", { ...fullQuery, id });
};

getNewsCategoryData();
</script>
<style scoped lang="less">
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 40px;
  .news-item {
    display: flex;
    align-items: center;
    padding: 24px 40px;
    border-bottom: 1px solid #ccd6de;
    .time {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100px;
      justify-content: center;
      .day {
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
      }
      div {
        font-size: 16px;
        line-height: 22px;
        display: flex;
        flex-direction: column;
      }
    }
    .vertical-divider {
      margin: 0 40px;
      width: 1px;
      background-color: #ccd6de;
      align-self: stretch;
    }
    .content {
      font-size: 16px;
      .title {
        margin-bottom: 8px;
        font-weight: 600;
      }
    }
    &:hover {
      cursor: pointer;
      .content .title {
        color: #4168ff;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  :deep(.inner-container) {
    .wrap-pl {
      padding: 0;
    }
  }
  .news-list {
    margin: 0;
    .news-item {
      padding: 82px 0;
      .time {
        width: 450px;
        gap: 20px;
        .day {
          font-size: 123px;
        }
        div {
          font-size: 72px;
          line-height: 82px;
        }
      }
      .vertical-divider {
        margin: 0 82px;
      }
      .content {
        flex: 1;
        font-size: 72px;
      }
    }
  }
}
</style>
